<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年</title>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<style>
            header nav div{
                float: left;
                margin: 3px 8px;
                font-size: large;
            }
            div a {
                 display: block;
             color: rgb(73, 18, 18);
              text-align: center;
                padding: 14px 16px;
                text-decoration: none;
               }
            div a:hover:not(.active) {
             background-color: rgb(20, 142, 149);
             }
            header nav::after{
                clear: both;
                content: '';
                display: block;
            }
            header{
                position: relative;
            }
            header nav{
                position: fixed;
                top: 20px;
                right: 0;
            }
            video {
            width: 100%;
             height: auto;
             }
            #ad{
                position: fixed;
                bottom: 0;
                right: 20;
            }
            body{
                font-size: 30px;
            }
            .qw{
              font-family: "Times New Roman", Times, serif;
              color: red;
              text-align: center;
              border: 3px solid rgb(59, 165, 164);
            }
</style>
<body>
    <header>
        <nav>
            <div><a href="#">首页</a></div>
            <div><a href="study.html">历史</a></div>
            <div><a href="food.html">现在</a></div>
            <div><a href="movie.html">将来</a></div>
            <audio controls="controls">
              <source src="2.ogg" type="audio/ogg">
              <source src="2.mp3" type="audio/mpeg">
                    <embed height="100" width="100" src="2.mp3" />
            </audio>
        </nav>
    </header>
    <div id="colee_left" style="overflow: hidden; width: 1920px;">
        <table cellpadding="0" cellspacing="0" border="0">
        <tr><td id="colee_left1" valign="top" align="center">
        <table cellpadding="2" cellspacing="0" border="0">
        <tr align="center">
        <td><p>&nbsp;</p ></td>
        <td><p>&nbsp;</p ></td>
        <td><p><img src="zp/1.jpg" width="920" height="580"></p ></td>
        <td><p><img src="zp/2.jpg" width="920" height="580"></p ></td>
        <td><p><img src="zp/3.jpg" width="920" height="580"></p ></td>
        <td><p><img src="zp/4.jpg" width="920" height="580"></p ></td>
        <td><p><img src="zp/5.jpg" width="920" height="580"></p ></td>
        <td><p><img src="zp/6.jpg" width="920" height="580"></p ></td>
        <td><p><img src="zp/7.jpg" width="920" height="580"></p ></td>
            <td><p><img src="zp/8.jpg" width="920" height="580"></p ></td>
        </tr>
        </table>
        </td>
        <td id="colee_left2" valign="top"></td>
        </tr>
        </table>
        </div>
        <script>
        var speed=1
        var colee_left2=document.getElementById("colee_left2");
        var colee_left1=document.getElementById("colee_left1");
        var colee_left=document.getElementById("colee_left");
        colee_left2.innerHTML=colee_left1.innerHTML
        function Marquee3(){
        if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)
        colee_left.scrollLeft-=colee_left1.offsetWidth
        else{
        colee_left.scrollLeft++
        }
        }
        var MyMar3=setInterval(Marquee3,speed)
        colee_left.onmouseover=function() {clearInterval(MyMar3)}
        colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
        </script>
        <h1 class="qw">春节烟花的视频</h1>
        <video width="400" controls>
            <source src="zp/1.avi" type="video/mp4">
            <source src="zp/1.ogg" type="video/ogg">
            春节烟花视频
          </video>
          <div id="ad">
            <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
              收藏栏
            </a>
            <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
              <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">收藏栏</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
              </div>
              <div class="offcanvas-body">
                <div>
                 收藏的电影与音乐
                </div>
                <div class="dropdown mt-3">
                  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
                    Dropdown button
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <li><a class="dropdown-item" href="#">收藏的电影</a></li>
                    <li><a class="dropdown-item" href="#">收藏的音乐</a></li>
                    <li><a class="dropdown-item" href="#">其他的收藏</a></li>
                  </ul>
                </div>
              </div>
            </div>
        </div>
        <footer><section class="m-page-navigation">
          <div class="container">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="h-titles h-navs">
                  <a href="index.html">
                    <span class="nav-arrow scrolla-element-anim-1 scroll-animate" data-animate="active">
                      点击返回主页>
                    </span>
                    <span class="h-title splitting-text-anim-2 scroll-animate" data-splitting="chars" data-animate="active">
                      
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section></footer>
</body>
</html>